<template>
  <div>
    <a-layout>
      <a-layout-header class="header">
        <div class="logo" />
        <a-space>
          <!-- <img src="@/assets/logo.png" alt="" /> -->
        </a-space>
        <a-space>
          <a-button type="primary" @click="quit">退出</a-button>
        </a-space>
      </a-layout-header>

      <a-layout>
        <a-layout-sider width="200" style="background: aqua">
          <a-menu
            v-model:selectedKeys="selectedKeys2"
            v-model:openKeys="openKeys"
            mode="inline"
            :style="{ height: '100%', borderRight: 0 }"
          >
            <a-sub-menu key="sub1">
              <template #title>
                <span>
                  <user-outlined />
                  哪些天堂
                </span>
              </template>
              <a-menu-item key="1" @click="jumpTo">哪些无穷无尽</a-menu-item>
              <a-menu-item key="2" @click="jumpToo">层层套叠的天空</a-menu-item>
              <a-menu-item key="3" @click="jumpTooo">他们在哪里</a-menu-item>
              <a-menu-item key="4" @click="jumpToooo">被轨迹陷害到</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub2">
              <template #title>
                <span>
                  <laptop-outlined />
                  这般模样
                </span>
              </template>
              <a-menu-item key="5" @click="jumpTooooo">而如今</a-menu-item>
              <a-menu-item key="6">我们是暗裔</a-menu-item>
              <a-menu-item key="7">我曾触摸过星辰</a-menu-item>
              <a-menu-item key="8">曾见证过数千个</a-menu-item>
            </a-sub-menu>
            <a-menu-item key="9">太阳的光芒</a-menu-item>
            <a-menu-item key="10">而如今我被这</a-menu-item>
            <a-menu-item key="11">优雅蒙蔽了双眼</a-menu-item>
            <a-menu-item key="12">所以我的目标</a-menu-item>
            <a-menu-item key="13">怎可能不黑暗</a-menu-item>
          </a-menu>
        </a-layout-sider>
        <a-layout-content>
          <router-view />
        </a-layout-content>
      </a-layout>
      <!-- <a-layout-footer>Footer</a-layout-footer> -->
    </a-layout>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, provide, watch } from "vue";
import { UserOutlined, LaptopOutlined } from "@ant-design/icons-vue";
import router from "@/router";
import { userStoreX } from "@/store/modules/user";
import { useRoute } from "vue-router";
import type { TableColumnsType } from "ant-design-vue";
const userStoreInfo: any = userStoreX();

const selectedKeys2 = ref();
const openKeys = ref(["sub1"]);
const route: any = useRoute();

onMounted(() => {
  switch (route.path) {
    case "/index/button":
      selectedKeys2.value = ["1"];
      break;
    case "/index/list":
      selectedKeys2.value = ["2"];
      break;
    case "/index/form":
      selectedKeys2.value = ["3"];
      break;
    case "/index/xlsx":
      selectedKeys2.value = ["5"];
      break;
    case "/index/table":
      selectedKeys2.value = ["4"];
      break;

    default:
      break;
  }
});

const jumpTo = () => {
  router.push("/index/button");
};
const jumpToo = () => {
  router.push("/index/list");
};
const jumpTooo = () => {
  router.push("/index/form");
};
const jumpToooo = () => {
  router.push("/index/table?id=1");
};
const jumpTooooo = () => {
  router.push("/index/xlsx");
};

const quit = () => {
  console.log("已退出！");
  userStoreInfo.changeUser({});
  router.push("/login");
};
const columns0: TableColumnsType = [
  {
    title: "Full Name",
    width: 100,
    dataIndex: "name",
    key: "name",
    fixed: "left",
  },
  { title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" },
  { title: "Column 1", dataIndex: "address", key: "1", width: 150 },
  { title: "Column 2", dataIndex: "address", key: "2", width: 150 },
  { title: "Column 3", dataIndex: "address", key: "3", width: 150 },
  { title: "Column 4", dataIndex: "address", key: "4", width: 150 },
];
const columns1: TableColumnsType = [
  { title: "Column 5", dataIndex: "address", key: "5", width: 150 },
];
const columns2: TableColumnsType = [
  { title: "Column 6", dataIndex: "address", key: "6", width: 150 },
  { title: "Column 7", dataIndex: "address", key: "7", width: 150 },
  { title: "Column 8", dataIndex: "address", key: "8" },
  {
    title: "Action",
    key: "operation",
    fixed: "right",
    width: 100,
  },
];
const columns: TableColumnsType = [...columns0, ...columns1, ...columns2];
const columnsNofive: TableColumnsType = [...columns0, ...columns2];

provide("menuData", columns);
provide("menuDataNofive", columnsNofive);
</script>

<style lang="less" scoped>
.ant-layout-content {
  justify-content: center;
  height: calc(100vh - 70px);
  padding: 12px;
}

.header {
  height: 70px;

  .ant-space-align-center {
    // text-align: right;
    float: right;
  }
}
</style>
